<script setup lang="ts">
import ArticleList from './components/ArticleList.vue'
import ChannelNav from './components/ChannelNav.vue'
import axios from 'axios'
import { ref } from 'vue';
// axios 结合js
// axios({
//   url: 'http://geek.itheima.net/v1_0/channels'
// }).then(res => {
//   console.log(res.data)
// })

// 使用ts的时候, axios()调用需要改成 axios.request(), 这样可以使用泛型
// 1. 使用泛型的目的,是告诉axios返回数据的类型
// 2. 泛型的接口需要和接口返回的数据一直,否则没有意义
// type ChannelItem = {
//   id: number
//   name: string
// }
// type ChannelResData = {
//   data: {
//     channels: ChannelItem[]
//   },
//   message: string
// }
// axios.request<ChannelResData>({
//   url: 'http://geek.itheima.net/v1_0/channels'
// }).then(res => {
//   console.log(res.data.data.channels[0].name)
// })

// 在App.vue中维护 频道id
const channelId = ref(0)
// 在父组件中可以在模板中使用 $event 接收到子组件传出来的值
const changeChannel = (val: number) => {
  console.log(val)
  channelId.value = val
}
</script>

<template>
<ChannelNav :channelId="channelId" @changeChannel="changeChannel"></ChannelNav>
<ArticleList :channelId="channelId"></ArticleList>
</template>

<style lang="scss" scoped></style>
